<!--
 * @Author: Y先森
 * @Date: 2023-05-09 10:16:48
 * @LastEditors: y && 250048395@qq.com
 * @LastEditTime: 2023-05-12 09:53:17
 * @FilePath: \y-website\src\Project\y-blog\views\creation\index.vue
-->
<template>
  <div class="h-full px-5 overflow-auto duration-500 scrollbar-none" ref="containerTarget">
    <navigation-vue></navigation-vue>
    <div class="mx-auto relative xl:mt-1">
      <article-vue :className="classObject[0].className"></article-vue>
      <photog-vue :className="classObject[1].className"></photog-vue>
      <note-vue :className="classObject[2].className"></note-vue>
    </div>
  </div>
</template>

<script setup>
import navigationVue from './components/navigation/index.vue'
import articleVue from './components/pages/article/index.vue'
import photogVue from './components/pages/photo/index.vue'
import noteVue from './components/pages/note/index.vue'
import { watch , reactive } from 'vue'
import { useStore } from 'vuex'

// 定义classObject
const classObject = reactive([
  {
    className:'one',
    active: true
  },
  {
    className:'two',
    active: false
  },
  {
    className:'three',
    active: false
  }
])
const store = useStore()
watch([()=>store.getters.creationCategorys,()=>store.getters.currentCreationCategoryIndex],(val)=>{
  const isIndex = val[1]
  console.log('val==>',val)
  if(val[0] && val[0].length > 0){
    // 激活的索引
    const activeIndex = classObject.findIndex(item => item.active);
    // 当前选中class
    const tempClass = classObject[isIndex].className;
    // 移植激活class => 给当前组件
    classObject[isIndex].className = classObject[activeIndex].className;
    // 反之 => 对换class
    classObject[activeIndex].className = tempClass;
    // 对移植跟被移植的组件active => 进行互选
    classObject[isIndex].active = true;
    classObject[activeIndex].active = false;
  }
})

</script>

<style scoped>
.one {
    @apply mr-[420px]  rounded duration-300;
}
.two {
    @apply absolute right-0 w-[390px] h-[560px] top-0 pt-3 px-3 dark:bg-indigo-dark-d rounded bg-zinc-50 duration-300 overflow-auto
}
.three {
    @apply absolute right-0 w-[390px] h-[560px] top-[600px] pt-3 px-3 dark:bg-indigo-dark-d rounded bg-zinc-50 duration-300 overflow-auto
}
::v-deep(.one .title) {
  display: none;
}
</style>
